<!--
# coding=UTF-8
# Copyright (c) 2025 Bird Software Solutions Ltd
# This program and the accompanying materials
# are made available under the terms of the Eclipse Public License 2.0
# which accompanies this distribution, and is available at
# https://www.eclipse.org/legal/epl-2.0/
#
# SPDX-License-Identifier: EPL-2.0
#
# Contributors:
#    Neil Mackenzie - initial API and implementation
#    Benjamin Arfa - improvements
#
-->
{% extends "pybirdai/workflow/base.html" %}

{% block breadcrumb_items %}
<span class="breadcrumb-separator">›</span>
<a href="{% url 'pybirdai:workflow_task' task_number=4 operation='do' %}">Task 4: Test Suite Execution</a>
<span class="breadcrumb-separator">›</span>
<span>Review</span>
{% endblock %}

{% block workflow_content %}
<div class="task-content">
    <h1>Task 4: Test Suite Execution - Review</h1>

    <div class="execution-overview">
        <div class="overview-card {% if execution_data.tests_executed %}success{% else %}warning{% endif %}">
            <h2>Execution Status</h2>
            <div class="status-icon">
                {% if execution_data.tests_executed %}
                <span style="font-size: 48px;">✓</span>
                {% else %}
                <span style="font-size: 48px;">⚠️</span>
                {% endif %}
            </div>
            <p class="status-text">
                {% if execution_data.tests_executed %}
                Execution and tests completed successfully
                {% else %}
                Execution completed with test issues
                {% endif %}
            </p>
            <div class="execution-time">
                <span class="time-label">Total Execution Time:</span>
                <span class="time-value">{{ execution_data.execution_time|default:"0:00:00" }}</span>
            </div>
        </div>

        <div class="test-summary">
            <h3>Test Configuration</h3>
            <div class="test-config-info">
                <div class="config-item">
                    <span class="config-label">Test Mode:</span>
                    <span class="config-value">{{ execution_data.test_mode|default:"Not specified" }}</span>
                </div>
                {% if execution_data.test_mode == 'config_file' %}
                <div class="config-item">
                    <span class="config-label">Config File:</span>
                    <span class="config-value">{{ execution_data.config_file }}</span>
                </div>
                {% elif execution_data.test_mode == 'specific_datapoint' %}
                <div class="config-item">
                    <span class="config-label">Template ID:</span>
                    <span class="config-value">{{ execution_data.test_params.reg_tid }}</span>
                </div>
                <div class="config-item">
                    <span class="config-label">Datapoint:</span>
                    <span class="config-value">{{ execution_data.test_params.dp_suffix }}</span>
                </div>
                <div class="config-item">
                    <span class="config-label">Value:</span>
                    <span class="config-value">{{ execution_data.test_params.dp_value }}</span>
                </div>
                {% endif %}
                <div class="config-item">
                    <span class="config-label">Tests Executed:</span>
                    <span class="config-value">
                        {% if execution_data.tests_executed %}✓ Yes{% else %}✗ No{% endif %}
                    </span>
                </div>
            </div>
        </div>
    </div>

    <h2>Execution Steps</h2>

    <div class="stage-results">
        <div class="stage-result">
            <h3>1. Datapoint Execution</h3>
            <div class="stage-metrics">
                <span class="metric">Datapoint ID: <strong>{{ execution_data.datapoint_id|default:"Not specified" }}</strong></span>
                <span class="metric">Status:
                    <strong class="{% if execution_data.datapoint_executed %}status-success{% else %}status-warning{% endif %}">
                        {% if execution_data.datapoint_executed %}✓ Complete{% else %}⚠ Issues{% endif %}
                    </strong>
                </span>
            </div>
            {% if execution_data.warning %}
            <div class="stage-warning">
                <strong>Warning:</strong> {{ execution_data.warning }}
            </div>
            {% endif %}
        </div>

        <div class="stage-result">
            <h3>2. Test Suite Execution</h3>
            <div class="stage-metrics">
                <span class="metric">Test Mode: <strong>{{ execution_data.test_mode|default:"Not configured" }}</strong></span>
                <span class="metric">Status:
                    <strong class="{% if execution_data.tests_executed %}status-success{% else %}status-error{% endif %}">
                        {% if execution_data.tests_executed %}✓ Complete{% else %}✗ Failed{% endif %}
                    </strong>
                </span>
            </div>
            {% if execution_data.test_error %}
            <div class="stage-error">
                <strong>Error:</strong> {{ execution_data.test_error }}
            </div>
            {% endif %}
        </div>
    </div>

    <h2>Steps Completed</h2>

    <div class="steps-completed">
        {% for step in execution_data.steps_completed %}
        <div class="step-item">
            <span class="step-icon">✓</span>
            <span class="step-text">{{ step }}</span>
        </div>
        {% empty %}
        <p>No steps completed yet.</p>
        {% endfor %}
    </div>

    <h2>Test Results Summary</h2>

    <div class="test-summary-section">
        <div class="test-summary-cards">
            <div class="summary-card total">
                <div class="card-icon">📊</div>
                <div class="card-content">
                    <h3>{{ total_tests }}</h3>
                    <p>Total Tests</p>
                </div>
            </div>

            <div class="summary-card passed">
                <div class="card-icon">✅</div>
                <div class="card-content">
                    <h3>{{ passed_tests }}</h3>
                    <p>Passed Tests</p>
                </div>
            </div>

            <div class="summary-card failed">
                <div class="card-icon">❌</div>
                <div class="card-content">
                    <h3>{{ failed_tests }}</h3>
                    <p>Failed Tests</p>
                </div>
            </div>

            <div class="summary-card success-rate">
                <div class="card-icon">📈</div>
                <div class="card-content">
                    <h3>{% if total_tests > 0 %}{% widthratio passed_tests total_tests 100 %}%{% else %}0%{% endif %}</h3>
                    <p>Success Rate</p>
                </div>
            </div>
        </div>
    </div>

    <h2>Test Results Details</h2>

    <div class="test-results-section">
        {% if test_results %}
        <div class="test-results-grid">
            {% for result in test_results %}
            <div class="test-result-card">
                <div class="test-header">
                    <h4>{{ result.test_information.regulatory_template_id }}</h4>
                    <span class="test-timestamp">{{ result.timestamp|date:"Y-m-d H:i:s" }}</span>
                </div>

                <div class="test-info">
                    <div class="info-row">
                        <span class="info-label">Datapoint:</span>
                        <span class="info-value">{{ result.test_information.datapoint_suffix }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Value:</span>
                        <span class="info-value">{{ result.test_information.datapoint_value }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Scenario:</span>
                        <span class="info-value">{{ result.test_information.scenario_name }}</span>
                    </div>
                </div>

                <div class="test-status">
                    {% if result.test_results.passed|length > 0 %}
                        <span class="status-badge passed">✓ PASSED ({{ result.test_results.passed|length }})</span>
                    {% elif result.test_results.failed|length > 0 %}
                        <span class="status-badge failed">✗ FAILED ({{ result.test_results.failed|length }})</span>
                    {% else %}
                        <span class="status-badge pending">⏳ NO RESULTS</span>
                    {% endif %}
                </div>

                {% if result.test_results.details.failures|length > 0 %}
                <div class="test-failures">
                    <h5>Failures:</h5>
                    <ul>
                        {% for failure in result.test_results.details.failures %}
                        <li>{{ failure }}</li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}

                {% if result.test_results.details.captured_stdout|length > 0 %}
                <div class="test-output">
                    <h5>Output:</h5>
                    <pre>{{ result.test_results.details.captured_stdout|join:"\n" }}</pre>
                </div>
                {% endif %}

                {% if result.test_results.details.captured_stderr|length > 0 %}
                <div class="test-errors">
                    <h5>Errors:</h5>
                    <pre>{{ result.test_results.details.captured_stderr|join:"\n" }}</pre>
                </div>
                {% endif %}

                <div class="test-details-toggle">
                    <button class="btn btn-sm btn-outline-secondary" onclick="toggleDetails('{{ forloop.counter }}')">
                        <i class="fas fa-info-circle"></i> Show Details
                    </button>
                </div>

                <div id="details-{{ forloop.counter }}" class="test-details" style="display: none;">
                    <h5>Platform Information:</h5>
                    <div class="platform-info">
                        <div class="info-row">
                            <span class="info-label">OS:</span>
                            <span class="info-value">{{ result.platform_info.os|default:"Not specified" }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">Python:</span>
                            <span class="info-value">{{ result.platform_info.python|default:"Not specified" }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">Packages:</span>
                            <span class="info-value">{{ result.platform_info.packages|default:"Not specified" }}</span>
                        </div>
                    </div>

                    <h5>Path Configuration:</h5>
                    <div class="path-info">
                        <div class="info-row">
                            <span class="info-label">Cache Dir:</span>
                            <span class="info-value">{{ result.paths.cachedir|default:"Not specified" }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">Root Dir:</span>
                            <span class="info-value">{{ result.paths.rootdir|default:"Not specified" }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">Config File:</span>
                            <span class="info-value">{{ result.paths.configfile|default:"Not specified" }}</span>
                        </div>
                    </div>

                    <h5>File Information:</h5>
                    <div class="file-info">
                        <div class="info-row">
                            <span class="info-label">Filename:</span>
                            <span class="info-value">{{ result.filename }}</span>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="no-results">
            <p>No test results found. Please run the tests first.</p>
        </div>
        {% endif %}
    </div>


    <div class="form-actions" style="margin-top: 30px;">
        <!-- <form method="post" style="display: inline;">
            {% csrf_token %}
            <button type="submit" name="mark_reviewed" class="btn btn-success">Mark as Reviewed</button>
        </form>
        <a href="{% url 'pybirdai:workflow_task' task_number=6 operation='compare' %}" class="btn btn-primary">Go to Compare</a> -->
        <a href="{% url 'pybirdai:workflow_dashboard' %}" class="operation-btn btn-secondary">Back to Dashboard</a>
    </div>

</div>

<style>
.execution-overview {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    margin-bottom: 30px;
}

.overview-card {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    border: 2px solid #dee2e6;
}

.overview-card.success {
    border-color: #28a745;
    background: #d4edda;
}

.overview-card.warning {
    border-color: #ffc107;
    background: #fff3cd;
}

.status-icon {
    margin: 20px 0;
}

.status-text {
    font-size: 18px;
    font-weight: 500;
    margin: 10px 0;
}

.execution-time {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.1);
}

.time-label {
    color: #6c757d;
}

.time-value {
    font-size: 24px;
    font-weight: bold;
    display: block;
    margin-top: 5px;
}

.test-summary {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
}

.test-config-info {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 4px;
}

.config-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dee2e6;
}

.config-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.config-label {
    font-weight: 600;
    color: #495057;
}

.config-value {
    color: #0d6efd;
    font-family: monospace;
}

.steps-completed {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}

.step-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    background: white;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.step-icon {
    color: #28a745;
    font-weight: bold;
    margin-right: 10px;
}

.step-text {
    flex: 1;
}

.stage-warning {
    margin-top: 10px;
    padding: 10px;
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    color: #856404;
}

.stage-error {
    margin-top: 10px;
    padding: 10px;
    background: #f8d7da;
    border: 1px solid #f1aeb5;
    border-radius: 4px;
    color: #721c24;
}

.status-warning {
    color: #ffc107;
}

.status-error {
    color: #dc3545;
}

.issues-section {
    margin-bottom: 30px;
}

.stage-results {
    margin-bottom: 30px;
}

.stage-result {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid #dee2e6;
}

.stage-result h3 {
    margin: 0 0 15px 0;
    color: #495057;
}

.stage-metrics {
    display: flex;
    gap: 30px;
}

.metric {
    color: #6c757d;
}

.metric strong {
    color: #0d6efd;
}

.status-success {
    color: #28a745;
}

.reports-section {
    margin-bottom: 30px;
}

.report-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.report-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.report-card h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
}

.report-card p {
    color: #6c757d;
    font-size: 14px;
    margin-bottom: 15px;
}



.export-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.export-options {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.test-summary-section {
    margin-bottom: 30px;
}

.test-summary-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.summary-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.summary-card.total {
    border-left: 4px solid #007bff;
}

.summary-card.passed {
    border-left: 4px solid #28a745;
}

.summary-card.failed {
    border-left: 4px solid #dc3545;
}

.summary-card.success-rate {
    border-left: 4px solid #17a2b8;
}

.card-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

.card-content h3 {
    font-size: 28px;
    font-weight: bold;
    margin: 0 0 5px 0;
    color: #333;
}

.card-content p {
    margin: 0;
    color: #6c757d;
    font-size: 14px;
}

.test-results-section {
    margin-bottom: 30px;
}

.test-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
}

.test-result-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
}

.test-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.test-header h4 {
    margin: 0;
    color: #333;
    font-size: 16px;
}

.test-timestamp {
    font-size: 12px;
    color: #6c757d;
    font-family: monospace;
}

.test-info {
    margin-bottom: 15px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 5px 0;
}

.info-label {
    font-weight: 600;
    color: #495057;
    min-width: 80px;
}

.info-value {
    color: #0d6efd;
    font-family: monospace;
    font-size: 13px;
    word-break: break-all;
}

.test-status {
    margin-bottom: 15px;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.status-badge.passed {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-badge.failed {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f1aeb5;
}

.status-badge.pending {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.test-failures {
    margin-bottom: 15px;
}

.test-failures h5 {
    margin: 0 0 10px 0;
    color: #dc3545;
    font-size: 14px;
}

.test-failures ul {
    margin: 0;
    padding-left: 20px;
}

.test-failures li {
    color: #721c24;
    font-size: 13px;
    margin-bottom: 5px;
}

.test-output, .test-errors {
    margin-bottom: 15px;
}

.test-output h5, .test-errors h5 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #495057;
}

.test-output pre, .test-errors pre {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px;
    font-size: 12px;
    max-height: 200px;
    overflow-y: auto;
    margin: 0;
}

.no-results {
    text-align: center;
    padding: 40px;
    background: #f8f9fa;
    border-radius: 8px;
    color: #6c757d;
}

.test-details-toggle {
    margin: 15px 0 10px 0;
}

.test-details {
    margin-top: 15px;
    padding: 15px;
    background: #f1f3f4;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.test-details h5 {
    margin: 15px 0 10px 0;
    color: #495057;
    font-size: 14px;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 5px;
}

.test-details h5:first-child {
    margin-top: 0;
}

.platform-info, .path-info, .file-info {
    background: white;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.platform-info .info-row, .path-info .info-row, .file-info .info-row {
    margin-bottom: 5px;
    padding: 2px 0;
}

.platform-info .info-value, .path-info .info-value, .file-info .info-value {
    font-size: 12px;
}
</style>

<script>
function exportResults(format) {
    const url = `{% url "pybirdai:workflow_task" task_number=6 operation="review" %}?export=${format}`;
    window.open(url, '_blank');
}

function toggleDetails(cardId) {
    const detailsDiv = document.getElementById('details-' + cardId);
    const button = event.target.closest('button');

    if (detailsDiv.style.display === 'none' || detailsDiv.style.display === '') {
        detailsDiv.style.display = 'block';
        button.innerHTML = '<i class="fas fa-info-circle"></i> Hide Details';
    } else {
        detailsDiv.style.display = 'none';
        button.innerHTML = '<i class="fas fa-info-circle"></i> Show Details';
    }
}
</script>
{% endblock %}
